<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="7">
        <my-card title="分类商品数量(饼图)">
          <pie-echart :pie-data="categoryGoodsData" />
        </my-card>
      </el-col>
      <el-col :span="10">
        <my-card title="不同城市商品销量">
          <map-echart :map-data="categoryGoodsSale" />
        </my-card>
      </el-col>
      <el-col :span="7">
        <my-card title="分类商品数量(玫瑰图)">
          <rose-echart :rose-data="categoryGoodsData" />
        </my-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="echart">
      <el-col :span="12">
        <my-card title="收藏量排行榜">
          <bar-echart v-bind="categoryGoodsFaver" />
        </my-card>
      </el-col>
      <el-col :span="12">
        <my-card title="销量数据统计图">
          <line-echart v-bind="categoryGoodsCount" />
        </my-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { computed, reactive, ref } from "vue";
import useEchartStore from "@/store/echarts";

import myCard from "@/base-ui/card";
import {
  BarEchart,
  PieEchart,
  RoseEchart,
  LineEchart,
  MapEchart,
} from "@/components/page-echart";

export default {
  components: {
    myCard,
    BarEchart,
    PieEchart,
    RoseEchart,
    LineEchart,
    MapEchart,
  },
  setup() {
    const store = useEchartStore();
    store.getCategoryAction();
    //销量数据
    const categoryGoodsCount = computed(() => {
      const xLabel = [];
      const values = [];

      store.categoryGoodsSale.forEach((item) => {
        xLabel.push(item.name);
        values.push(item.goodsCount);
      });

      return { xLabel, values };
    });
    //分类数据
    const categoryGoodsData = computed(() => {
      return store.categoryGoodsCount.map((item) => {
        return { name: item.name, value: item.goodsCount };
      });
    });
    //收藏数据
    const categoryGoodsFaver = computed(() => {
      const xLabel = [];
      const values = [];

      store.categoryGoodsFavor.forEach((item) => {
        xLabel.push(item.name);
        values.push(item.goodsFavor);
      });

      return { xLabel, values };
    });
    //城市数据
    const categoryGoodsSale = computed(() => {
      return store.addressGoodsSale.map((item) => {
        return { name: item.address, value: item.count };
      });
    });
    return {
      categoryGoodsCount,
      categoryGoodsData,
      categoryGoodsFaver,
      categoryGoodsSale,
    };
  },
};
</script>

<style scoped>
.echart {
  margin-top: 20px;
}
</style>
